<template>
  <div id="components-modal-demo-position">
    <a-modal
      centered
      :visible="true"
      title="修改链接"
      :footer="null"
      @cancel="cancel"
      class="addForm"
    >
      <a-form-model
        ref="ruleForm"
        :model="params"
        :rules="rules"
        class="joinForm"
        v-bind="layout"
      >
        <a-form-model-item ref="link" label="跳转链接" prop="link">
          <a-input
            placeholder="跳转链接"
            v-model="params.link"
            @blur="
              () => {
                $refs.link.onFieldBlur()
              }
            "
          />
        </a-form-model-item>
      </a-form-model>
      <div class="btnClass">
        <a-button @click="cancel" class="cancel commonBtn">取消</a-button>
        <a-button type="primary" class="commonBtn" @click="confirmClick"
          >确认</a-button
        >
      </div>
    </a-modal>
  </div>
</template>
<script>
import { editLinkManage } from '@/api/linkManage'
export default {
  props: {
    id:[String,Number]
  },
  data() {
    return {
      Visible: true,
      params: {
        link: '',
      },
      rules: {
        link: [
          { required: true, message: '请输入正确格式的链接!', trigger: 'blur' }
        ]
      },
      layout: {
        labelCol: { span: 8 },
        wrapperCol: { span: 16 }
      },
      confirmDirty: false
    }
  },
  mounted() { },
  methods: {
    handleCancel() {
      this.$emit('cancelVisible', false)
    },
    cancel() {
      this.$emit('cancel')
    },
    confirmClick() {
      let isBreak = false
      for (let key in this.params) {
        if (this.params[key] === '' && !isBreak) {
          isBreak = true
          this.$message.warning('请完善信息!')
          return
        }
      }
      this.params.id = this.id
      editLinkManage(this.params).then(res => {
        if (res.code === 200) {
          this.$message.success('新增成功!')
          this.$emit('addSuccess')
        } else {
          this.$message.warning(res.msg)
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped></style>
